<!-- <template>
	<view>
		<navbar title="测试"></navbar>
		<view class="left_right_column_box">
			<view class="left_column">
				<scroll-view :style="{height: viewHeight}" scroll-y="true" :scroll-top="scrollTop">
					<view v-for="item in titleContenData" :key="item.id"
						:class="{'left_column_for': true, activity: selectIndex==item.index?true:false}"
						@click="clickTitle(item)">
						{{item.title}}
					</view>
				</scroll-view>
			</view>

			<view class="right_column">
				<scroll-view :style="{height: viewHeight}" scroll-y="true" :scroll-into-view="selectId"
					scroll-with-animation="true" @scroll="scroll">
					<view :id="item.id" class="floorType right_title_content_for" v-for="item in titleContenData"
						:key="item.id">
						<view class="right_title">{{item.title}}</view>
						<view v-for="items in item.contents" :key="items.id">{{items.content}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	// 防抖
	let timer = undefined;
	
	export default {
		data() {
			return {
				// 屏幕高度
				viewHeight: null,
				// 源数据
				titleContenData: [],
				// 设置锚点
				selectId: 'id1',
				// 设置高亮
				selectIndex: 0,
				// 设置左栏顶部距离
				scrollTop: 0,
			}
		},
	
		mounted() {
			let that = this;
			uni.getSystemInfo({
				success: function({
					windowHeight
				}) {
					that.viewHeight = windowHeight + 'px';
				}
			});
	
			// 创建数据
			that.createData();
	
			// 此处使用$nextTick是非常有必要
			// 官方建议
			// 实际测试如果不用会报错
			that.$nextTick(function() {
				const query = uni.createSelectorQuery().in(that);
	
				query.selectAll('.floorType').boundingClientRect(VNodeAll => {
					VNodeAll.forEach(({
						top
					}, i) => {
						// 获取并存储每个视图到顶部的距离
						this.titleContenData[i].viewTop = top;
					});
				}).exec();
	
				console.log('titleContenData:', this.titleContenData);
			});
		},
	
		methods: {
			// 滚动时触发
			scroll({
				detail: {
					scrollTop
				}
			}) {
				let that = this,
					titleContenData = that.titleContenData;
	
				// 防抖
				// timer定义在全局
				// 如果没有防抖会触发许多次
				// 对性能不友好
				if (timer !== undefined) clearTimeout(timer);
	
				timer = setTimeout(function() {
					// 当右侧滚动到顶部时强制赋值为0
					// 因为在滚动时一般获取到的数据是0-10的范围
					// 小概率会获取到0
					// 因为原先存储viewTop属性的第一个值就是0
					scrollTop = scrollTop < 10 ? 0 : scrollTop;
					let selectIndex = titleContenData.findIndex((item) => item.viewTop >= scrollTop);
					console.log('scrollTop:', scrollTop);
					// 设置高亮
					that.selectIndex = selectIndex;
					// 此属性联动左侧滚动条
					// 当右侧滚动时
					// 左侧也会相应的滚动
					// 只是滚动的距离不一样
					that.scrollTop = 5 * that.selectIndex;
				}, 70);
			},
	
			// 标题点击事件
			clickTitle({
				id,
				index
			}) {
				console.log(id, index);
				// 设置锚点
				this.selectId = id;
				// 设置高亮
				this.selectIndex = index;
			},
	
			// 生成内容
			createContent(n) {
				let content = [];
				for (let i = 0; i < n; i++) content.push({
					id: i + 1,
					content: `内容${i+1}内容`
				});
				return content;
			},
	
			// 创建数据
			createData() {
				// 生成标题
				for (let i = 0; i < 24; i++) this.titleContenData.push({
					// 因为需要绑定id作为锚点目标
					// 所以不能以数字开头
					id: `id${i+1}`,
					index: i,
					title: '标题' + (i + 1),
					contents: this.createContent(parseInt(Math.random() * 24 + 1, 10))
				})
			}
		},
	}

</script>
<style>
	/* 公共样式 */
	.left_right_column_box {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}
	
	/* 左侧样式 */
	.left_column {
		flex: 1;
	}
	
	.left_column_for {
		text-align: center;
		padding: 10rpx 0;
	}
	
	.activity {
		color: #000fff;
	}
	
	/* 右侧样式 */
	.right_column {
		flex: 3;
		margin-left: 36rpx;
	}
	
	.right_title_content_for {
		margin-top: 36rpx;
	}
	
	.right_title_content_for:first-child {
		margin-top: 0;
	}
	
	.right_title {
		font-weight: 700;
	}
	
	/* 隐藏scroll-wiew元素的滚动条 */
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

</style> -->
<template>
    <view class="container">
        <view class="input-content">
            <view class="input-item-img"><text class="tit">主图</text></view>
            <zlxls-upload-img 
                ref="zlxlsUploadImg" 
                @uploaded="uploaded1" 
                :imgList="imgList1" 
                :maxCount="1" 
                :autoUpload='true' 
                :tapModel="'replace'" 
                :header="header" 
                :uploadUrl="uploadUrl"
            ></zlxls-upload-img>
            <view class="input-item-img"><text class="tit">轮播图</text></view>
            <zlxls-upload-img 
                ref="zlxlsUploadImg" 
                @uploaded="uploaded2" 
                :imgList="imgList2" 
                :maxCount="6" 
                :autoUpload='true' 
                :tapModel="'replace'" 
                :header="header" 
                :uploadUrl="uploadUrl"
            ></zlxls-upload-img>
        </view>
    </view>
</template>
<script>
    import zlxlsUploadImg from "@/components/zlxls-upload-img/zlxls-upload-img.vue"
    export default {
        components: {zlxlsUploadImg},
        data() {
            return {
                uploadUrl: "http://localhost/api/base.upload/file",
                imgList1:[],
                imgList2:[],
                header:{},
                params: {
                    cover:'',
                    slider:'',
                }
            }
        },
        onLoad(option) {
            this.header = {"x-api-key":this.getStorageSync('accessToken')}
        },
        onHide() {

        },
        methods: {  
            uploaded1(_res){
                this.params.cover = _res.allImages.join("|");
            },
            uploaded2(_res){
                this.params.slider = _res.allImages.join("|")
            },
        }
    }
</script>
<style scoped>
	.hlUploadCnt{
		margin:0 24rpx;
	}
</style>